<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script type="text/babel">
      // 有且仅能有一个根元素
      const ele = (
        <div>
          <p></p>
          <button></button>
        </div>
      );

      // 标签必须正确的闭合
      const ele2 = <div></div>;

      // 使用驼峰式命名法给 所有 大部分属性命名！
      // style 需要写成对象形式
      // 表达式采用单花括号
      //    PS: 注意表达式与语句的区分
      //        能赋值给变量的才是表达式
      //        1. 不能写 if 、for 、 switch
      // const ele3 = <div className="box"></div>;
      // const name = "姓名";
      // const ele3 = (
      //   <div>
      //     <label htmlFor="username">{name}</label>
      //     <input id="username" style={{ color: "red" }} />
      //     <button
      //       onClick={() => {
      //         console.log("dddd");
      //       }}
      //     >
      //       点我
      //     </button>
      //   </div>
      // );

      const name = "<p>Josh Perez</p>";
      const element = (
        <h1>
          Hello,
          <div dangerouslySetInnerHTML={{ __html: name }}></div>
          <div />
          <div></div>
          <div>{false}</div>
          <div>{null}</div>
          <div>{undefined}</div>
          <div>{true}</div>
        </h1>
      );

      const root = ReactDOM.createRoot(document.querySelector("#root"));
      root.render(element);
    </script>
  </body>
</html>
